<script>
export default {
  data() {
    return {
      isshow: false
    }
  },
  mounted() {
    //创建一个_this,为了拿到组件实例的this,拿到this之后再拿isshow,才能让元素展示出来
    const _this = this
    // 创建地图实例
    var map = new BMapGL.Map('container', { showControls: true })
    // 创建点坐标
    var point = new BMapGL.Point(116.404, 39.915)
    // 地图的初始比例
    map.centerAndZoom(point, 15)
    //开启鼠标滚轮缩放
    map.enableScrollWheelZoom(true)
    //设置地图旋转角度
    map.setHeading(64.5)
    //设置地图的倾斜角度
    map.setTilt(73)

    // 1.标准地图：BMAP_NORMAL_MAP
    // 2.地球模式：BMAP_EARTH_MAP
    // 3.普通卫星地图：BMAP_SATELLITE_MAP
    // =================================================================================================================================================
    // 设置地图类型为地球模式
    // map.setMapType(BMAP_EARTH_MAP)
    // =================================================================================================================================================

    // 添加比例尺控件
    // var scaleCtrl = new BMapGL.ScaleControl({ anchor: BMAP_ANCHOR_TOP_RIGHT })
    // map.addControl(scaleCtrl)
    // 添加缩放控件
    // var zoomCtrl = new BMapGL.ZoomControl({ anchor: BMAP_ANCHOR_TOP_RIGHT })
    // map.addControl(zoomCtrl)
    // =================================================================================================================================================

    // 添加城市列表控件
    var cityCtrl = new BMapGL.CityListControl()
    map.addControl(cityCtrl)
    // =================================================================================================================================================

    //添加定位控件,如果想要改控件的位置,就在函数中传递一个对象,
    // key为anchor,
    // value为下面四个值

    // BMAP_ANCHOR_TOP_LEFT	表示控件定位于地图的左上角
    // BMAP_ANCHOR_TOP_RIGHT	表示控件定位于地图的右上角
    // BMAP_ANCHOR_BOTTOM_LEFT	表示控件定位于地图的左下角
    // BMAP_ANCHOR_BOTTOM_RIGHT	表示控件定位于地图的右下角
    // =================================================================================================================================================

    //添加定位控件
    var locationCtrl = new BMapGL.LocationControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT })
    map.addControl(locationCtrl)
    // =================================================================================================================================================

    //自定义控件位置
    var opts = {
      offset: new BMapGL.Size(15, 150)
    }
    // 添加控件
    map.addControl(new BMapGL.ZoomControl(opts))
    // 移除控件
    // map.removeControl(new BMapGL.ZoomControl(opts))

    var opts = {
      offset: new BMapGL.Size(80, 20)
    }
    // 添加控件
    map.addControl(new BMapGL.ScaleControl(opts))
    // 删除控件
    // map.removeControl(new BMapGL.ScaleControl(opts))
    // =================================================================================================================================================

    //自定义地图
    map.setMapStyleV2({
      styleId: '485c82e912ba246f367f257fae21dc99'
    })

    // var point = new BMapGL.Point(116.404, 39.915)
    var marker = new BMapGL.Marker(point) // 创建标注
    map.addOverlay(marker) // 将标注添加到地图中

    // =================================================================================================================================================


    // 根据坐标位置绘制折线图
    var polyline = new BMapGL.Polyline([
      new BMapGL.Point(116.399, 39.90),
      new BMapGL.Point(116.405, 39.92),
      new BMapGL.Point(116.420, 39.9),
      new BMapGL.Point(116.435, 39.92),
      new BMapGL.Point(116.445, 39.9),


    ], { strokeColor: 'blue', strokeWeight: 2, strokeOpacity: 0.5 })
    map.addOverlay(polyline)
    // =================================================================================================================================================

    //根据坐标绘制多边形
    var polygon = new BMapGL.Polygon([
      new BMapGL.Point(116.387112, 39.920977),
      new BMapGL.Point(116.385243, 39.913063),
      new BMapGL.Point(116.394226, 39.917988),
      new BMapGL.Point(116.401772, 39.921364),
      new BMapGL.Point(116.41248, 39.927893)
    ], { strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5 });
    map.addOverlay(polygon);
    // =================================================================================================================================================

    // 浏览器定位
    // var geolocation = new BMapGL.Geolocation();
    // geolocation.getCurrentPosition(function (r) {
    //   if (this.getStatus() == BMAP_STATUS_SUCCESS) {
    //     //创建一个点,并且将这个点插到当前位置
    //     var mk = new BMapGL.Marker(r.point);
    //     map.addOverlay(mk);
    //     //将地图位置移动到当前位置
    //     map.panTo(r.point);
    //     alert('您的位置：' + r.point.lng + ',' + r.point.lat);
    //     mk.addEventListener('click', function (e) {
    //       // alert('click!')
    //       console.log(_this);
    //       _this.isshow = true
    //     });
    //   }
    //   else {
    //     alert('failed' + this.getStatus());
    //   }
    // });
    // =================================================================================================================================================

    // 开启SDK辅助定位
    // var geolocation = new BMapGL.Geolocation();
    // geolocation.enableSDKLocation();
    // geolocation.getCurrentPosition(function (r) {
    //   if (this.getStatus() == BMAP_STATUS_SUCCESS) {
    //     //创建一个点,并且将这个点插到当前位置
    //     var mk = new BMapGL.Marker(r.point);
    //     map.addOverlay(mk);
    //     //将地图位置移动到当前位置
    //     map.panTo(r.point);
    //     alert('您的位置：' + r.point.lng + ',' + r.point.lat);
    //     mk.addEventListener('click', function (e) {
    //       // alert('click!')
    //       console.log(_this);
    //       _this.isshow = true
    //     });
    //   }
    //   else {
    //     alert('failed' + this.getStatus());
    //   }
    // });
    // =================================================================================================================================================


    //地图检索,根据关键字搜索
    // var local = new BMapGL.LocalSearch(map, {
    //   renderOptions: { map: map }
    // });
    // local.search("洗手间");
    // =================================================================================================================================================


    //路程时间
    // var output = "从西单到上地驾车需要";
    // var searchComplete = function (results) {
    //   if (transit.getStatus() != BMAP_STATUS_SUCCESS) {
    //     return;
    //   }
    //   var plan = results.getPlan(0);
    //   output += plan.getDuration(true) + "\n";                //获取时间
    //   output += "总路程为：";
    //   output += plan.getDistance(true) + "\n";             //获取距离
    // }
    // var transit = new BMapGL.DrivingRoute(map, {
    //   renderOptions: { map: map },
    //   onSearchComplete: searchComplete,
    //   onPolylinesSet: function () {
    //     setTimeout(function () { alert(output) }, "1000");
    //   }
    // });
    // var start = new BMapGL.Point(116.404844, 39.911836);
    // var end = new BMapGL.Point(116.308102, 40.056);

    // transit.search(start, end);
    // =================================================================================================================================================


    //规定起始终止位置画出路线
    var walking = new BMapGL.WalkingRoute(map, { renderOptions: { map: map, panel: "r-result", autoViewport: true } });
    walking.search("将台", "北京怡德医院");
    // =================================================================================================================================================




  }
}
</script>
<template>
  <div>
    <!-- <h5>地图显示</h5> -->
    <div id="container"></div>
    <div class="content" v-show="isshow">点击当前位置时展示内容</div>
  </div>
</template>
<style lang="scss" scoped>
.content {
  position: fixed;
  left: calc((100% - 150px) /2);
  top: calc((100% - 150px) /2);
  text-align: center;
  line-height: 150px;
  width: 300px;
  height: 150px;
  background-color: white;
  border-radius: 15px;
}

#container {
  height: 600px;
}
</style>
